{% extends "layouts/base.volt" %}

{% block title %}{{ get_title() }}{% endblock %}
{% block css %}
	{{ stylesheet_link('css/pages/reports.css') }}
{% endblock %}

{% block content %}

{{ partial("layouts/navbar", ['currentPage': 'index/reports']) }}

<div class="subnavbar">

	<div class="subnavbar-inner">
	
		<div class="container">

			<ul class="mainnav">
				<li>
					<a href="/index/index">
						<i class="icon-dashboard"></i>
						<span>公告板</span>
					</a>    				
				</li>
				<li class="active">
					<a href="/index/reports">
						<i class="icon-list-alt"></i>
						<span>排行榜</span>
					</a>    				
				</li>
			</ul>

		</div> <!-- /container -->
	
	</div> <!-- /subnavbar-inner -->

</div> <!-- /subnavbar -->

<div class="main">
	
	<div class="main-inner">

	    <div class="container">
	    	
	     <div class="row">
	      	
	      	<div class="span12">
	      
		      	<div class="info-box">
	               <div class="row-fluid stats-box">
	                  <div class="span4">
	                  	<div class="stats-box-title">注册用户</div>
	                    <div class="stats-box-all-info"><i class="icon-user" style="color:#3366cc;"></i> {{ join }}</div>
	                  </div>
	                  
	                  <div class="span4">
	                    <div class="stats-box-title">完成用户</div>
	                    <div class="stats-box-all-info"><i class="icon-pencil"  style="color:#F30"></i> {{ finished }}</div>
	                  </div>
	                  
	                  <div class="span4">
	                    <div class="stats-box-title">答题系统总正确率</div>
	                    <div class="stats-box-all-info"><i class="icon-bar-chart" style="color:#3C3"></i> {{ ratio }}</div>
	                  </div>
	               </div>
	            </div>
               
            </div>
            <div class="span12">
	      		
	      		<div class="widget">
							
					<div class="widget-header">
						<i class="icon-list-alt"></i>
						<h3>排行榜（前十）</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content">
						
						<table class="table">
					      <thead>
					        <tr>
					          <th>排名</th>
					          <th>用户名</th>
					          <th>得分</th>
					          <th>正确率</th>
					        </tr>
					      </thead>
					      <tbody>
					      {% set id = 0 %}
					      {% for rank in ranks %}
					        <tr>
					          <th scope="row">{{ rank }}</th>
					          <td>{{ names[id] }}</td>
					          <td>{{ marks[id] }}</td>
					          <td>{{ ratios[id] }}</td>
					        </tr>
					        {% set id += 1 %}
					       {% endfor %}
					      </tbody>
					    </table>

					</div> <!-- /widget-content -->
				
				</div> <!-- /widget -->
									
		      </div> <!-- /span6 -->
         </div>      
	      	
	  	  <!-- /row -->
	
	      <div class="row">
	      	
	      	<div class="span6">
	      		
	      		<div class="widget">
						
					<div class="widget-header">
						<i class="icon-star"></i>
						<h3>你的排名</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content" >
						<div class="stats-box-all-info"><i class="icon-flag" style="color:#3366cc"></i> {{ selfRank }}</div>
					</div> <!-- /widget-content -->
						
				</div> <!-- /widget -->
				
	      		
	      		
	      		
		    </div> <!-- /span6 -->

		    <div class="span6">
	      		
	      		<div class="widget">
						
					<div class="widget-header">
						<i class="icon-star"></i>
						<h3>你的得分</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content" >
						<div class="stats-box-all-info"><i class="icon-legal" style="color:#F30"></i> {{ selfMark }}</div>
					</div> <!-- /widget-content -->
						
				</div> <!-- /widget -->
				
	      		
	      		
	      		
		    </div> <!-- /span6 -->

		    <div class="span6">
	      		
	      		<div class="widget">
						
					<div class="widget-header">
						<i class="icon-star"></i>
						<h3>你的正确率</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content" >
						<div class="stats-box-all-info"><i class="icon-ok-sign" style="color:#3C3"></i> {{ selfRatio }}</div>
					</div> <!-- /widget-content -->
						
				</div> <!-- /widget -->
				
	      		
	      		
	      		
		    </div> <!-- /span6 -->

		    <div class="span6">
	      		
	      		<div class="widget">
						
					<div class="widget-header">
						<i class="icon-star"></i>
						<h3>你的完成比例（完成题目/总题目）</h3>
					</div> <!-- /widget-header -->
					
					<div class="widget-content" >
						<div class="stats-box-all-info"><i class="icon-check" style="color:#3366cc"></i> {{ selfAchieve }}</div>
					</div> <!-- /widget-content -->
						
				</div> <!-- /widget -->
				
	      		
	      		
	      		
		    </div> <!-- /span6 -->
	      	
	      	
	      </div> <!-- /row -->
	      
	    </div> <!-- /container -->
	    
	</div> <!-- /main-inner -->
    
</div> <!-- /main -->
{% endblock %}

{% block js %}
{% endblock %}